<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>详细操作教程</title>
    <!-- 引入Element样式 -->
    <link rel="stylesheet" href="../../css/elementUI/index.css">
    <link rel="stylesheet" href="../../assets/icon/iconfont.css">
    <!-- 引入Vue -->
    <script src="../../js/vue/vue.min.js "></script>
    <!-- 引入组件库 -->
    <script src="../../js/elementUI/index.js"></script>
</head>
<body>
  <div id="app" v-cloak>
    <el-container>
        <el-aside width="auto" style="background-color: #545c64;">
            <el-menu default-active="1-4-1"
            class="el-menu-vertical-demo"
            @select="selectLocation"
            :collapse="isCollapse"
            background-color="#545c64"
            text-color="#fff"
            :default-openeds="['1','2','3','4']"
            active-text-color="#ffd04b">
            <el-menu-item index="1">
                <i class="iconfont icon-fanhui"></i>
                <span slot="title">返回</span>
            </el-menu-item>
            <el-submenu index="2">
                <template slot="title">
                <i class="iconfont icon-sort"></i>
                <span slot="title">步骤目录</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item v-for="step in step" :index="step.index" :herf="step.url" :key="step.step">{{step.text}}</el-menu-item>
                </el-menu-item-group>
                </el-submenu>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                <i class="iconfont icon-gongnengguanli"></i>
                <span slot="title">额外功能</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item v-for="functionality in functionality" :index="functionality.index" :herf="functionality.url" :key="functionality.functionality">{{functionality.text}}</el-menu-item>
                </el-menu-item-group>
                </el-submenu>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                <i class="iconfont icon-wenhao"></i>
                <span slot="title">疑问</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item v-for="doubt in doubt" :index="doubt.index" :herf="doubt.url" :key="doubt.doubt">{{doubt.text}}</el-menu-item>
                </el-menu-item-group>
                </el-submenu>
            </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
                <el-header height="auto">
                    <i id="collapseButton" style="float: left; padding: 3px 3px" class="iconfont icon-caidanshouqi" @click="changeCollapse()">{{collapseText}}</i>
                </el-header>
            <el-main style="padding: 0 0 0 0 ;">
                <iframe :src="documentSrc" width="100%" frameborder="0" marginheight="0px"></iframe>
            </el-main>
        </el-container>
    </el-container>
  </div>
</body>
<style>
html{
    height: 100%;
    width: 100%;
}
body{
    height: 100%;
    margin: 0;
    padding: 0;
}
iframe{
    margin: 0px 0px;
    width: 100%;
    height: 100%;
}
[v-cloak] {
    display: none;
}
#app{
    height: 100%;
}
.el-container{
    height: 100%;
    border: 1px solid #eee;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>
<script>
changeHeight = function(){
    var mainHeight = window.getComputedStyle(document.getElementsByClassName('el-main')[0], null).height;
    mainHeight = mainHeight.substring(0,mainHeight.indexOf('px'));
    var mainPadding = window.getComputedStyle(document.getElementsByClassName('el-main')[0], null).padding;
    mainPadding = mainPadding.substring(0,mainPadding.indexOf('px'));
    document.getElementsByTagName('iframe')[0].style.height = (mainHeight-4)+'px';
}
var url = location.search; //获取url中"?"符后的字串 ('?modFlag=business&role=1')
var theRequest = new Object();
if ( url.indexOf( "?" ) != -1 ) {
  var str = url.substr( 1 ); //substr()方法返回从参数值开始到结束的字符串；
  var strs = str.split( "&" );
  for ( var i = 0; i < strs.length; i++ ) {
    theRequest[ strs[ i ].split( "=" )[ 0 ] ] = ( strs[ i ].split( "=" )[ 1 ] );
  }
}
window.onresize = function(){
    changeHeight();
}
var app = new Vue({
    el: '#app',
    data: {
        visible: false,
        isCollapse: false,
        collapseText: '收起菜单',
        iframeWin: {},
        documentSrc: theRequest.href,
        step: JSON.parse(decodeURI(theRequest.step)),
        functionality: JSON.parse(decodeURI(theRequest.functionality)),
        doubt: JSON.parse(decodeURI(theRequest.doubt)),
    },
    methods: {
        changeCollapse() {
            this.isCollapse = !this.isCollapse;
            if(this.isCollapse) {
                this.collapseText = '展开菜单';
                document.getElementById('collapseButton').setAttribute('class','iconfont icon-caidanzhankai');
            } else {
                this.collapseText = '收起菜单';
                document.getElementById('collapseButton').setAttribute('class','iconfont icon-caidanshouqi');
            }
        },
        selectLocation(key, keyPath) {
            console.log(key+"&&&"+keyPath)
            if(key == "1"){window.location.href=theRequest.PreviousPage}
            if(keyPath[0] == "2") {
                for (i in this.step) {
                    if(keyPath[1] == this.step[i].index) {
                        document.getElementsByTagName('iframe')[0].setAttribute('src',this.documentSrc+"#"+encodeURI(this.step[i].text));
                    }
                }
            }
            if(keyPath[0] == "3") {
                for (i in this.functionality) {
                    if(keyPath[1] == this.functionality[i].index) {
                        document.getElementsByTagName('iframe')[0].setAttribute('src',this.documentSrc+"#"+encodeURI(this.functionality[i].text));
                    }
                }
            }
            if(keyPath[0] == "4") {
                for (i in this.doubt) {
                    if(keyPath[1] == this.doubt[i].index) {
                        document.getElementsByTagName('iframe')[0].setAttribute('src',this.documentSrc+"#"+encodeURI(this.doubt[i].text));
                    }
                }
            }
            
        },
    },
    mounted(){
        changeHeight();
    },
});
</script>
</html>